<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/logo.png">
    <script src="../../build/image3D.js"></script>
    <title>照相机着色器 - 透视 | 测试</title>

    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        attribute vec4 a_position;
        uniform mat4 u_matrix;
        attribute vec4 a_color;
        varying vec4 v_color;
        void main(){
            vec4 temp=u_matrix * a_position;

            // 表示眼睛距离vec4(0.0,0.0,1.0)的距离
            float dist=2.0;

            // 使用投影直接计算
            // 此处要注意z轴承显示和实际的方向
            gl_Position=vec4((dist+1.0)*temp.x/(dist+temp.z),(dist+1.0)*temp.y/(dist+temp.z),temp.z,1.0);
            v_color=a_color;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        precision mediump float;
        varying vec4 v_color;
        void main(){
            gl_FragColor=v_color;
        }
    </script>

</head>

<body>

    <canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        // 创建3D对象并配置好画布和着色器
        var image3d = new image3D(document.getElementsByTagName('canvas')[0], {
            "vertex-shader": document.getElementById("vs").innerText,
            "fragment-shader": document.getElementById("fs").innerText,
            depth: true
        });

        // 点的坐标
        image3d.Buffer().write(new Float32Array([

            // 右侧的三个三角形
            0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色
            0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

            0.75, 1.0, -2.0, 0.4, 1.0, 0.4, // 后面的绿色
            0.25, -1.0, -2.0, 0.4, 1.0, 0.4,
            1.25, -1.0, -2.0, 1.0, 0.4, 0.4,

            0.75, 1.0, -1.0, 1.0, 1.0, 0.4, // 中间的黄色
            0.25, -1.0, -1.0, 1.0, 1.0, 0.4,
            1.25, -1.0, -1.0, 1.0, 0.4, 0.4,

            // 左侧的三个三角形
            -0.75, 1.0, -2.0, 0.4, 1.0, 0.4, // 后面的绿色
            -1.25, -1.0, -2.0, 0.4, 1.0, 0.4,
            -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,

            -0.75, 1.0, -1.0, 1.0, 1.0, 0.4, // 中间的黄色
            -1.25, -1.0, -1.0, 1.0, 1.0, 0.4,
            -0.25, -1.0, -1.0, 1.0, 0.4, 0.4,

            -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色
            -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            -0.25, -1.0, 0.0, 1.0, 0.4, 0.4

        ])).use('a_position', 3, 6, 0).use('a_color', 3, 6, 3);

        var painter = image3d.Painter();

        // 传递照相机
        image3d.setUniformMatrix("u_matrix",
            image3d.Camera({
                size: 2,
                proof: true
            }).value()
        );

        // 绘制
        for (var i = 0; i < 6; i++)
            painter.drawTriangle(i * 3, 3);

    </script>

</body>

</html>
